.birth-search {
  /* min-height: 100vh; */
  font-size: 14px;
}

.birth-search .banner-box {
  width: 100%;
  /* height: 144px; */
  background: url(../images/birth-search/banner.png) no-repeat center;
  background-size: 100% 100%;
}

.birth-search .content {
  width: 94%;
  margin: 0 auto 14px;
  box-shadow: -3px 5px 20px 0px rgba(196, 196, 196, 0.75);
  padding-bottom: 1px;
}

.content .child {
  position: relative;
  width: 100%;
  height: 126px;
  padding: 16px 18px;
  box-sizing: border-box;
  margin-top: -26px;
  background: url(../images/birth-search/child.png) no-repeat center;
  background-size: 100% 100%;
  color: #fff;
}

.content .child .li {
  padding: 4px 0;
}

.content .child .status {
  display: inline-block;
  padding: 1px 12px 1px;
  color: #77c7c8;
  border-radius: 18px;
  background-color: #ffeb99;
  margin-left: 36px;
}

.content .info .ul {
  position: relative;
  width: 100%;
  padding: 0 22px;
  margin: 20px 0 32px;
  box-sizing: border-box;
  overflow: hidden;
}

.content .info .li {
  padding: 6px 0 6px 24px;
}

.content .info .li:nth-of-type(1) {
  padding-top: 0;
}

.content .info .li:nth-last-of-type(1) {
  padding-bottom: 0;
}

.content .info .gray {
  color: #585858;
  opacity: 0.8;
}

.content .info .left-icon {
  position: absolute;
  left: 22px;
  bottom: 0;
  width: 10px;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.content .info .left-icon::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: -1em;

}

.content .info .kid::before {
  background: linear-gradient(to bottom, #f8c985, #fbfcaf);
  border-radius: 8px;
}

.content .info .mom::before {
  background: linear-gradient(to bottom, #d95f5a, #f6b6b6);
  border-radius: 8px;
}

.content .info .dad::before {
  background: linear-gradient(to bottom, #a8e0ff, #e1f4ff);
  border-radius: 8px;
}

.content .info .ul::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 16px;
  top: 0;
  left: 22px;
}

.content .info .ul-kid::after {
  background: url(../images/birth-search/kid.png) no-repeat center;
  background-size: 100% 100%;
}

.content .info .ul-mom::after {
  background: url(../images/birth-search/mom.png) no-repeat center;
  background-size: 100% 100%;
}

.content .info .ul-dad::after {
  background: url(../images/birth-search/dad.png) no-repeat center;
  background-size: 100% 100%;
}

/* 页面公共样式 */
.title {
  width: 96%;
  padding: 8px 0;
  border-radius: 8px;
  margin: 0 auto;
  color: #585858;
  opacity: 0.8;
  text-align: center;
  margin-top: 18px;
}

.title-child {
  background-color: #b3e4e9;
}

.title-mom {
  background-color: #fcd3d3;
}

.title-dad {
  background-color: #bde8ff;
}